<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>css 学习</title>
<!-- 嵌入css -->
  <style type="text/css">
    h3.h3_red{
      color:red;
    }
  </style>

  <!-- 外部文件css -->
<link rel="stylesheet" type="text/css" href="./my_css.css">

</head>

<body>

  <h3 style="color:blue"> Heading 1 </h3>

  <h3 class='h3_red'> Heading 1 </h3>

  <h4 class="h4_blue">外部文件css</h4>
  <h4 id="h4_id">外部文件css</h4>

<br>

<h2>更多的选择子</h2>
<pre style="font-size:18px">
  h1, p, span 等等. 元素选择子
  .className 类选择子
  #idName id 选择子
  * 选择所有
  h1.className 选择h1的className类
  h1#idName 选择h1的idName元素
  p span 内部选择子 (选择 p 里面的 span)
  p > span 子类选择 (‘span’ 是 ‘p’ 的子类)
  h1, h2, p 组多选(选择 h1, h2 和 p)
  span[my_id] 选择具有‘my_id’属性的 ‘span’
  span[my_id=m_span] 选择具有‘my_id=m_span’属性的
</pre>

<br>

<h2>更多常用的css属性</h2>
<pre style="font-size:18px">
Property        Syntax            Description/possible values
size            20%               size = 20%
                20px              20 pixel
                2em               2*font-size
                2mm, 2cm, 2in     2 mm, cm and inch
color           names e.g.        red, blue, green
                hex code (#RRGGBB or #RGB) #FFF000 or #FFF
                rgb(num, num, num) rgb(0, 0, 255) or rgb(20%, 10%, 70%)
link            a:link            a:link {color: red}
                a:hover
                a:visited
                a:active
Font            font-family       serif, cursive
                font-style        normal, italic, oblique
                font-variant      normal, small-caps
                font-weight       normal, bold, bolder, lighter, 100-900
                font-size         10px, small, medium, large etc.
Text            color             red, #FFF
                letter-spacing    10px
                word-spacing      10 px
                text-align        right, left, center
                text-decoration   underline, overline, line-through, none
                text-transform    capitalize, uppercase, lowercase, none
                white-space       pre, normal, nowrap
                text-shadow       text-shadow:5px 5px 8px red;
Image           border            ‘1px’, or ‘1px solid blue’
                height, width     100px, 20%
Border          border-style      solid, dashed, dotted, double, none etc.
                border-top-style
                border-bottom-style
                border-left-style
                border-right-style
                border-width      4px, 4pt
                border-bottom-width similarly use ‘top’, ‘left’, ‘right’
                border (shortcut) 1px solid blue’
Margin          margin, margin-left etc.
Padding         padding (top, bottom, left, right) ‘10px 10px 2px 2px’ or ‘10px 2px’
                padding-right, padding-left etc.

</pre>

</body>

</html>
